import React, { Component } from 'react';
import { Tabs ,Button, WingBlank, List, InputItem, Toast } from 'antd-mobile';
import axios from 'axios';

const tabs = [
  { title: '登录' },
  { title: '注册' },
];
class Login extends Component {
	regbtn() {
		let username=document.querySelector('.regusername input').value;
		let password=document.querySelector('.regpassword input').value;
		console.log(username,password);
		axios.post('/users/reg',{username:username,password:password})
			.then((data) => {
				console.log('register',data.data.code)
				if( data.data.code === 1){
					this.showToast('注册成功！');
				} else if( data.data.code === 2) {
					this.showToast('该手机号已注册！');
				}
			})
	}
	logbtn() {
			let username=document.querySelector('.logusername input').value;
			let password=document.querySelector('.logpassword input').value;
			console.log(username,password);
			axios.post('/users/log',{username:username,password:password})
				.then((data) => {
					console.log('logister',data.data)
					if( data.data.code === 2){
						localStorage.setItem("username",username);
						this.showToast('登陆成功！');
						this.props.history.push('/user');
					} else if( data.data.code === 1) {
						this.showToast('该手机号未注册！');
					}
				})
		}
	showToast(tex) {
	  Toast.info(tex);
	}
	goback () {
		this.props.history.push('/user')
	}
	render() {
		return (
			<div className="container">
				<div className="box login-box">
					<div className="login-header">
						<div className="h-top">
							<i className="iconfont icon-left-copy" 
							onClick={this.goback.bind(this)}></i>
						</div>
						<div className="h-middle">
							<p>喜欢TA , 就穿TA 。</p>
							<p>If you Like it.Wear it.</p>
						</div>
					</div>
					<div className="login-content">
						<Tabs tabs={tabs} initalPage={'t2'} >
							<div className="login">
								<List>
									<InputItem
									type="phone"
									placeholder="186 1234 1234" 
									className="logusername"
									>手机号码</InputItem>
									<InputItem
									type="password"
									placeholder="****" 
									className="logpassword"
									>密码</InputItem>
								</List>
								<WingBlank>
									<Button onClick={this.logbtn.bind(this)} type="warning" >登录</Button>
								</WingBlank>
							</div>
							<div className="register">
								<List>
									<InputItem
									type="phone"
									placeholder="186 1234 1234" 
									className="regusername"
									>手机号码</InputItem>
									<InputItem
									type="password"
									placeholder="****" 
									className="regpassword"
									>密码</InputItem>
								</List>
								<WingBlank>
									<Button onClick={this.regbtn.bind(this)} 
									ref={(Button) => { this.Button = Button; }}
									type="warning">注册</Button>
								</WingBlank>
							</div>
						</Tabs>
					</div>
					<div className="share">
						<ul>
							<li>
								<i className="iconfont icon-zhifubao"></i>
								<p>支付宝</p>
							</li>
							<li>
								<i className="iconfont icon-webchat"></i>
								<p>微信</p>
							</li>
							<li>
								<i className="iconfont icon-qq"></i>
								<p>QQ</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		)
	}
}


export default Login;